<template>
  <div class="editor-container">
    <a-layout>
      <a-layout-sider width="300" style="background: #fff">
        <div class="sidebar-container">
          <component-list
            :list="templateList"
            @onItemClick="addItem"
          ></component-list>
        </div>
      </a-layout-sider>
      <a-layout style="padding: 0 24px 24px">
        <a-layout-content class="preview-container">
          <p>画布区域</p>
          <div class="preview-list" id="canvas-area">
            <edit-wrapper
              class="component-item-main"
              v-for="item in componentTxt"
              :key="item.id"
              :id="item.id"
              @setActive="setActive"
              :actived="item.id === (currentElement&&currentElement.id)"
            >
              <close-circle-outlined @click="delCompont(item.id)" />
              <component :is="item.name" v-bind="item.props" />
            </edit-wrapper>
          </div>
        </a-layout-content>
      </a-layout>
      <a-layout-sider
        width="300"
        style="background:  #fff"
        class="settings-panel"
      >
      <props-table v-if="currentElement && currentElement.props" :attrProps="currentElement.props" @change="handleChange"></props-table>
        <pre>
          {{currentElement && currentElement.props }}
        </pre>
      </a-layout-sider>
    </a-layout>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue"
import { useStore } from "vuex"
import { GlobalDataProps } from "../store/index"
import { defaultTextTemplates } from "../defaultTemplates"
import { CloseCircleOutlined } from "@ant-design/icons-vue"
import { TextComponentProps } from "../defaultProps"
import { ComponentsData } from "../store/editor"
import EditWrapper from "../components/EditWrapper.vue"
import LText from "../components/Ltext.vue"
import ComponentList from "../components/ComponentList.vue"
import PropsTable from "@/components/PropsTable.vue"
export default defineComponent({
  components: {
    LText,
    ComponentList,
    CloseCircleOutlined,
    EditWrapper,
    PropsTable,
  },
  setup() {
    const store = useStore<GlobalDataProps>()
    const componentTxt = computed(() => store.state.editor.component)
    const templateList = defaultTextTemplates
    const currentElement = computed<ComponentsData | null>(
      () => store.getters.getCurrentElement
    )
    const addItem = (props: Partial<TextComponentProps>) => {
      store.commit("addComponent", props)
    }
    const delCompont = (props: string) => {
      store.commit("delComponent", props)
    }
    const setActive = (props: string) => {
      store.commit("setActive", props)
    }
    const handleChange = (e: any)=>{
      store.commit('updateComponent',e)
    }
    return {
      componentTxt,
      templateList,
      addItem,
      delCompont,
      setActive,
      currentElement,
      handleChange
    }
  },
})
</script>

<style>
.editor-container .preview-container {
  padding: 24px;
  margin: 0;
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.editor-container .preview-list {
  padding: 0;
  margin: 0;
  min-width: 375px;
  min-height: 200px;
  border: 1px solid #efefef;
  background: #fff;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  margin-top: 50px;
  max-height: 80vh;
}
</style>
